<!doctype html>
<!--suppress ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="dice">
    <meta name="author" content="weina">
    <title>open home</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/select2.min.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="/js/select2.min.js"></script>

</head>
<body>
<div class="container" style="margin-top: 100px">
    <div class="form-horizontal">
        <fieldset class="form-group">
            <label for="roomNumber" class="col-sm-2 control-label" style="text-align: right">Room Number</label>
            <div class="col-sm-7">
                <input type="text" class="form-control" id="roomNumber" placeholder="Room Number">
                <!--<small class="text-muted">input room number</small>-->
            </div>
        </fieldset>
        <fieldset class="form-group">
            <label for="roomPwd" class="col-sm-2 form-control-label" style="text-align: right">Room Password</label>
            <div class="col-sm-7">
                <input type="password" class="form-control" id="roomPwd" placeholder="Room Password">
            </div>
        </fieldset>
        <fieldset class="form-group">
            <label for="playerCount" class="col-sm-2 form-control-label" style="text-align: right">Player Count</label>
            <div class="col-sm-7">
                <input type="text" class="form-control" id="playerCount" placeholder="Player Count">
            </div>
        </fieldset>
        <fieldset class="form-group row">
            <label class="col-sm-3 form-control-label"></label>
            <div class="col-sm-5">
                <button class="btnSubmit btn btn-primary">submit</button>
            </div>
        </fieldset>
    </div>
</div> <!-- /container -->
<script type="text/javascript">

    $(document).keyup(function (event) {
        if (event.keyCode === 13) {
            $(".btnSubmit").trigger("click");
        }
    });

    $('.btnSubmit').bind('click', function () {
        openRoom();
    });

    function openRoom() {
        var roomNumber = $("#roomNumber").val();
        var roomPwd = $("#roomPwd").val();
        var playerCount = $("#playerCount").val();
        var param = {
            roomNumber: roomNumber,
            roomPwd: roomPwd,
            playerCount: playerCount
        };
        $.ajax({
            url: "/roomOwner/openRoom",
            type: "post",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(param),
            success: function (data) {
                if (data.result == "success" && data.bizCode=="E_0000") {
                    alert("open room successful");
                    location.href = "roomList";
                }else{
                    alert(data.bizMsg);
                }
            }
        });
    }

</script>
</body>
</html>